<script>
export default {
  name: "index_1",
  data() {
    return {
      loginParams: {
        username: null,
        password: null,
        token: null
      },
    }
  },
  methods: {
    loginBtn() {
      // axios.post('http://8.130.82.196:8081/ruoyi-admin/login', {
      //   username: this.loginParams.username,
      //   password: this.loginParams.password,
      // }).then(res => {
      //   console.log(res)
      //   if (res.data.code === 200) {
      console.log(this.loginParams)
      this.$store.state.userInfolist = {
        // token: res.data.token,
        username: this.loginParams.username,
        password: this.loginParams.password,
        token: this.loginParams.token
      }
      // this.loginParams.token = res.data.token;
      this.$router.push({path: '/index'})
      window.localStorage.setItem('userInfolist', JSON.stringify(this.$store.state.userInfolist))
      // this.$store.state.userInfolist = this.loginParams
      // } else {
      //   this.$message.error(res.data.msg);
      // }
      // })
    }
  }
}
</script>

<template>
  <div class="main">
    <div class="top-content">
      <div class="inner-bg">
        <div class="container">
          <div class="row">
            <div class="col-sm-8 col-sm-offset-2 text">
              <h1><strong>企业综合管理平台</strong></h1>
              <div class="description">
                <!--                <p>-->
                <!--                  This is a free responsive login form made with Bootstrap.-->
                <!--                  Download it on <a href="http://azmind.com"><strong>AZMIND</strong></a>, customize and use it as you-->
                <!--                  like!-->
                <!--                </p>-->
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6 col-sm-offset-3 form-box">
              <div class="form-top" style="height: 80px;">
                <div class="form-top-left">
                  <span class="login-box" style="font-size:23px;color:black;font-weight: bolder">请登录</span>
                  <!--                  <p>Enter your username and password to log on:</p>-->
                </div>
                <!--                <div class="form-top-right">
                                  <i class="fa fa-key"></i>
                                </div>-->
              </div>
              <div class="form-bottom">
                <form role="form" class="login-form">
                  <div class="form-group">
                    <input v-model="loginParams.username" type="text" name="form-username" placeholder="请输入账号"
                           class="form-username form-control"
                           id="form-username">
                  </div>
                  <div class="form-group">
                    <input v-model="loginParams.password" type="password" name="form-password" placeholder="请输入密码"
                           class="form-password form-control" id="form-password">
                  </div>
                  <button class="btn" style="background-color: #2d84cd" @click.prevent="loginBtn">登录</button>
                </form>
              </div>
            </div>
          </div>
          <!--          <div class="row">-->
          <!--            <div class="col-sm-6 col-sm-offset-3 social-login">-->
          <!--              <h3>...or login with:</h3>-->
          <!--              <div class="social-login-buttons">-->
          <!--                <a class="btn btn-link-1 btn-link-1-facebook" href="#">-->
          <!--                  <i class="fa fa-facebook"></i> Facebook-->
          <!--                </a>-->
          <!--                <a class="btn btn-link-1 btn-link-1-twitter" href="#">-->
          <!--                  <i class="fa fa-twitter"></i> Twitter-->
          <!--                </a>-->
          <!--                <a class="btn btn-link-1 btn-link-1-google-plus" href="#">-->
          <!--                  <i class="fa fa-google-plus"></i> Google Plus-->
          <!--                </a>-->
          <!--              </div>-->
          <!--            </div>-->
          <!--          </div>-->
        </div>
      </div>

    </div>

  </div>
</template>

<style scoped lang="less">
//
//<!-- CSS -->
//<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
//<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
//<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
//<link rel="stylesheet" href="assets/css/form-elements.css">
//<link rel="stylesheet" href="assets/css/style.css">
@import "../assets/css.css";
@import "../assets/bootstrap/css/bootstrap-theme.min.css";
@import "../assets/font-awesome/css/font-awesome.min.css";
@import "../assets/css/form-elements.css";
@import "../assets/css/style.css";

.main {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: #888;
  line-height: 30px;
  text-align: center;
}

.login-box {
  display: block;
  margin: 0 auto;
}

.form-top-left {
  margin-left: 0 !important;
  width: 100%;
}

.form-top {
  text-align: center;
}

.top-content {
  //1.直接使用backdrop-filter进行模糊

  //backdrop-filter: blur(3px);

  //2。先设置background再设置filter进行模糊

  //background: url("MovingHeart.gif");
  //filter: blur(3px);
  background-size: cover;
  background-image: url("../image/login-back.png");
  //background-image: url("../assets/img/backgrounds/1.jpg");
  background-repeat: no-repeat;
  //background-size: 100%;
  //background-size: cover; /* 确保图片覆盖整个元素 */
  background-position: center; /* 将图片居中显示 */
  min-height: 100vh; /* 确保至少为视口高度 */

}


.form-box {
  margin-top: 35px;
}

@media (min-width: 768px) {
  .col-sm-offset-3 {
    margin-left: 25%;
  }
}

@media (min-width: 768px) {
  .col-sm-6 {
    width: 50%;
  }
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  //padding-left: 500px;
}

.top-content .text {
  color: #fff;
}

@media (min-width: 768px) {
  .col-sm-offset-2 {
    margin-left: 16.66666667%;
  }
}

@media (min-width: 768px) {
  .col-sm-8 {
    width: 66.66666667%;
  }
}

@media (min-width: 768px) {
  .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
    float: left;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

.form-group {
  margin-bottom: 15px;
}

//@media (min-width: 992px) {
//  .container {
//    width: 970px;
//  }
//}
//@media (min-width: 768px) {
//  .container {
//    width: 750px;
//  }
//}
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

</style>
